{% load static wagtailcore_tags wagtailimages_tags wagtailuserbar blogapp_tags el_pagination_tags menu_tags wagtailmd compress %}

<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>{% block title %}{{ blog_page.title }}{% if blog_page.description %} | {{ blog_page.description }}{% endif %}{% endblock title %}</title>
    <meta name="description" content="{% block meta_description %}{{ blog_page.search_description }}{% endblock meta_description %}"/>

    <link rel="canonical" href="{% block canonical %}{% canonical_url %}{% endblock canonical %}"/>

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

    {% compress css %}
    <link type="text/x-scss" href="{% static 'blog/scss/blog.scss' %}" rel="stylesheet" media="screen">
    {% endcompress %}

  </head>

  <body>

    {% wagtailuserbar %}

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
      <div class="container">
        <a class="navbar-brand" href="/blog">Wagtail Blog Demo</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            {% main_menu template="menu/main_menu.html" %}
        </div>
      </div>
    </nav>

    <!-- Page Content -->
    <div class="container">

      <div class="row">

            {% block maincontent %}

                <div class="col-md-8">
                    {% block content %}

                    {% endblock %}
                </div>

                {% include 'blog/components/sidebar.html' %}

            {% endblock %}

      </div>
      <!-- /.row -->

    </div>
    <!-- /.container -->

    <!-- Footer -->
    <footer class="py-5 bg-dark">
      <div class="container">
        <p class="m-0 text-center text-white">Copyright &copy; 2017-2018 Built with <a href="https://github.com/michael-yin/wagtail-bootstrap-blog" >wagtail-bootstrap-blog</a>
        </p>
      </div>
      <!-- /.container -->
    </footer>

    <!-- jQuery -->
    <script src="{% static 'blog/js/jquery.js' %}"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="{% static 'blog/js/bootstrap.bundle.min.js' %}"></script>

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-39890589-7"></script>

    <script type="text/javascript">
    if (document.location.hostname.search("wagtail.michaelyin.info") !== -1) {
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());

          gtag('config', 'UA-39890589-7');
    }
    </script>

  </body>

</html>

